<!DOCTYPE html>

<html>
<head>
    <title>Beego</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/static/plus/bootstrap-4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/plus/raty-3.0.0/lib/jquery.raty.css">
    <link rel="stylesheet" href="/static/css/jquery.page.css">
    <style>
        .content {
            margin: 0 auto;
            width: 80%;
        }
        .media-body .title {
            font-size: 15px;
            color: #1b1e21;
            font-weight: bold;
        }
        .media-body {
            width: calc(100% - 170px);
        }
        .media-body .movie-item {
            font-size: 13px;
            margin-top: 2px;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
            width: 95%;
            font-family: 楷体, serif;
        }
        .form-inline {
            margin-bottom: 20px;
        }
        .form-group {
            margin-right: 30px;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <a class="navbar-brand" href="#">Go - 豆瓣电影</a>
</nav>

<div class="content">

    <form class="form-inline" method="get" action="/movie/list">
        <div class="form-group">
            <label for="MovieName">电影名：</label>
            <input type="text" value="{{.MovieName}}" class="form-control" id="MovieName" name="MovieName">
        </div>
        <div class="form-group">
            <label for="order">排序内容：</label>
            <select class="form-control" name="order" id="order">
                <option value="">默认</option>
                <option value="movie_name">电影名</option>
                <option value="movie_on_time">上映时间</option>
                <option value="movie_grade">评分</option>
            </select>
        </div>
        <div class="form-group">
            <label for="type">类型：</label>
            <select class="form-control" name="type" id="type">
                <option value="">全部</option>
            </select>
        </div>
        <div class="form-group">
            <label for="type">国家：</label>
            <select class="form-control" name="country" id="country">
                <option value="">全部</option>
            </select>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success">查询</button>
        </div>
    </form>

    <ul class="list-group">
        {{range .page.Data}}
            <li class="list-group-item">
                <a href="/movie/info?id={{.Id}}" style="text-decoration:none;color: black;">
                <div class="media">
                    <img src="{{.MoviePic}}" class="img-rounded mr-3" alt="{{.MovieName}}" height="120px">
                    <div class="media-body">
                        <div class="title">{{.MovieName}}</div>
                        <div><span class="star" data-score="{{.MovieGrade}}"></span> <span style="color: #FF6633;">{{.MovieGrade}}</span></div>
                        {{if .MovieDirector}}
                            <div class="movie-item">导演：{{.MovieDirector}}</div>
                        {{end}}
                        {{if .MovieWriter}}
                            <div class="movie-item">编剧：{{.MovieWriter}}</div>
                        {{end}}
                        {{if .MovieOnTime}}
                            <div class="movie-item">上映时间：{{.MovieOnTime}}</div>
                        {{end}}
                        {{if .MovieSynopsis}}
                            <div class="movie-item">简介：{{.MovieSynopsis}}</div>
                        {{end}}
                    </div>
                </div>
                </a>
            </li>
        {{end}}
    </ul>

    <div class="pagination"></div>
    <div style="margin-bottom: 50px"></div>
</div>
<script src="/static/js/jquery-3.5.1.min.js"></script>
<script src="/static/plus/raty-3.0.0/lib/jquery.raty.js"></script>
<script src="/static/plus/bootstrap-4.5.0/js/bootstrap.min.js"></script>
<script src="/static/js/jquery.page.js"></script>
<script>
    $("#order").val({{.order}});
    $(".star").raty({number: 10, readOnly: true, half: true, round: { down: .39, full: .6, up: .89 }});
    $(".pagination").createPage({
        pageCount: {{.page.PageCount}},
        current: {{.page.PageNo}},
        backFn:function(p){
            window.location.href = "/movie/list?pageNo=" + p + "&" + $(".form-inline").serialize()
        }
    });
    $.ajax({
        url: "/movie/type_list",
        type: "POST",
        success: function (res) {
            $("#type").empty().append('<option value="">全部</option>')
            $.each(res, function (k, v) {
                $("#type").append('<option ' + ({{.type}} === k ? 'selected' : '') + ' value="' + k + '">' + k + '</option>')
            })
        }
    })
    $.ajax({
        url: "/movie/country_list",
        type: "POST",
        success: function (res) {
            $("#country").empty().append('<option value="">全部</option>')
            $.each(res, function (k, v) {
                $("#country").append('<option ' + ({{.country}} === k ? 'selected' : '') + ' value="' + k + '">' + k + '</option>')
            })
        }
    })
</script>
</body>
</html>
